<template>
	<view>
		<my-search @focus="toSearch"></my-search>
		<view class="tab">
			
			<view class="tab-title">
				<view class="title" @click="tabIndex = i" :class="i === tabIndex ? 'active': ''" v-for="(v, i) in titleList" :key="i">{{ v.title }}</view>
			</view>
			<view class="tab-content">
				<navigator :url="'../detail/detail?id=' + v.id" v-for="(v, i) in list" :key="i" >
					<list-item :item="v">
						<view slot="desc">
							{{ v.desc }}
						</view>
					</list-item>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import tabBarMixins from '../../mixins/tabBar-mixins.js'
	export default {
		mixins: [tabBarMixins],
		data() {
			return {
				titleList: [],
				tabIndex: 0,
				uid: '',
				list: [],
			};
		},
		onLoad() {
				this.getTitleList()
		},
		watch: {
			tabIndex() {
				this.uid = this.titleList[this.tabIndex].id;
				this.getList()
			}
		},
		methods: {
			async getTitleList() {
				const [error, resp] = await uni.request({
					url: 'http://localhost:3000/tabTitle'
				});
				this.titleList = resp.data;
				this.uid = this.titleList[this.tabIndex].id;
				this.getList()
			},
			async getList() {
				const [error, resp] = await uni.request({
					url: 'http://localhost:3000/list',
					data: {
						uid: this.uid
					}
				});
				console.log(resp.data)
				this.list = resp.data
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.tab {
	display: flex;
	height: calc(100vh - 80px);
	.tab-title {
		width: 120rpx;
		border-right: 1rpx solid #ccc;
		height: 100%;
		overflow-y: scroll;
		.title {
			text-align: center;
			margin: 20rpx 10rpx;
			&.active {
				border-left: 4rpx solid red;
				color: red;
			}
		}
	}
	.tab-content {
		flex: 1;
		height: 100%;
		overflow-y: scroll;
		// background-color: skyblue;
	}
}
</style>